<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件标签</title>

</head>
<body>
<div id="app">
    {{message}}
    <counter @click-child-component="clickChildFun"></counter>
    <box :title="title" :contents="contents"></box>
    <p>-----------</p>
    <child ref="child1"></child>
    <p>-------------</p>
    <button @click="getChild">获取子组件</button>
    <p>-----------------</p>
    <named_slot>
        <template v-slot:header>
            <h1>头部</h1>
            <button></button>
        </template>
        <template v-slot:default>
            <h1>main</h1>
        </template>
        <template v-slot:footer>
            <h1>尾部</h1>
        </template>

    </named_slot>

    <p>------------</p>
    <todo_list>
        <template v-slot:default="slotProps">
            <span style="color: brown">{{slotProps}}</span>
            <span style="color: red">{{ slotProps.index }} {{ slotProps.item }}</span>
        </template>

    </todo_list>
    <p>--------------</p>
    <async-item></async-item>
</div>

<script src="../vue.global.js"></script>
<!--<script type="text/template" id="counter">-->
<!--    <button @click="count++">点击了{{count}}次</button>-->
<!--</script>-->

<template id="counter">
    <button @click="clickChild">点击子组件</button>
</template>

<template id="box">
    <h2>{{title}}</h2>
    <h3 v-for="item in contents">{{item}}</h3>
</template>

<template id="child">
    <button @click="childClick">点击</button>
</template>

<template id="named-slot">
    <header>
        <slot name="header">头部内容</slot>
    </header>

    <main>
        <slot>主要内容</slot>
    </main>

    <footer>
        <slot name="footer">底部内容</slot>
    </footer>
</template>

<template id="todo-list">
    <ul>
        <li v-for="(item, index) in todo" style="list-style: none">

            <slot :item="item" :index="index"></slot>
        </li>

    </ul>

</template>

<script>

    const Counter = {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            clickChild: function () {
                alert("点击了子组件")
                this.$emit("click-child-component", "{name:'张三',age:12}")
            }
        },
        template: "#counter"
    }

    const Box = {
        props: ["title", "contents"],
        template: "#box"
    }


    const Child = {
        data() {
            return {
                msg: "this is children's message"

            }
        },
        methods: {
            childClick() {
                alert("点击了子组件")
            }
        },
        template: "#child"
    }


    const NamedSlot = {
        template: "#named-slot"
    }
    const todoList = {
        data() {
            return {
                todo: ['Feed a cat', 'Buy milk']
            }
        },
        template: "#todo-list"
    }


    const app = Vue.createApp({
        data() {
            return {
                message: "s",
                title: "这是标题1",
                contents: ["内容1", "内容2", "内容3", "内容4"]
            }
        },
        methods: {
            clickChildFun(object) {
                console.log("父组件收到点击子组件的消息")
                console.log(object)

            },
            getChild() {
                // console.log(this.$refs.child1.msg)
                this.$refs.child1.childClick()
            }
        },
        components: {
            counter: Counter,
            box: Box,
            child: Child,
            named_slot: NamedSlot,
            todo_list: todoList
        },
        errorCaptured(err, instance, info) {
            console.log(err, instance, info)
            return false;
        }
    })
    app.component("async-item", Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template: `<div>异步组件</div>`
                })
            }, 3000)
        })
    }))

    app.mount("#app")
</script>
</body>
</html>